import { Meta, Canvas } from '@storybook/addon-docs';

<Meta title="Design system/Buttons" />

# Buttons

## Default Buttons

### Default

The default button should be used in the vast majority of circumstances.

There is also a destructive variant for actions which cause destructive actions.

<Canvas>
  <button
    type="button"
    class="
      inline-flex
      items-center
      font-semibold
      text-gray-600
      h-btn
      px-sm
      mr-sm
      bg-gray-50
      bg-gradient-to-t
      from-transparent
      to-white
      border
      border-gray-300
      rounded
      shadow-sm
      hover:border-gray-400
      focus:outline-none
      focus:bg-gradient-to-t
      focus:from-bg-gray-50
      focus:to-bg-gray-50
      focus:ring-2
      focus:ring-offset-2
      focus:ring-yellow-400
    "
  >
    Default Button
  </button>
  <button
    type="button"
    class="
      inline-flex
      items-center
      font-semibold
      text-red-600
      h-btn
      px-sm
      mr-sm
      bg-gray-50
      bg-gradient-to-t
      from-transparent
      to-white
      border
      border-gray-300
      rounded
      shadow-sm
      hover:border-gray-400
      focus:outline-none
      focus:bg-gradient-to-t
      focus:from-bg-gray-50
      focus:to-bg-gray-50
      focus:ring-2
      focus:ring-offset-2
      focus:ring-yellow-400
    "
  >
    Destructive Button
  </button>
</Canvas>

### Default - Small Buttons

Small buttons can be used for inline or tabular controls.

We should aim to use this control more sparingly than we currently use it (defaulting to default height more often).

<Canvas>
  <button
    type="button"
    class="
      inline-flex
      items-center
      font-semibold
      text-gray-600
      h-btnsm
      px-sm
      mr-sm
      bg-gray-50
      bg-gradient-to-t
      from-transparent
      to-white
      border
      border-gray-300
      rounded
      shadow-sm
      hover:border-gray-400
      focus:outline-none
      focus:bg-gradient-to-t
      focus:from-bg-gray-50
      focus:to-bg-gray-50
      focus:ring-2
      focus:ring-offset-2
      focus:ring-yellow-400
    "
  >
    Default Button
  </button>
  <button
    type="button"
    class="
      inline-flex
      items-center
      font-semibold
      text-red-600
      h-btnsm
      px-sm
      mr-sm
      bg-gray-50
      bg-gradient-to-t
      from-transparent
      to-white
      border
      border-gray-300
      rounded
      shadow-sm
      hover:border-gray-400
      focus:outline-none
      focus:bg-gradient-to-t
      focus:from-bg-gray-50
      focus:to-bg-gray-50
      focus:ring-2
      focus:ring-offset-2
      focus:ring-yellow-400
    "
  >
    Destructive Button
  </button>
</Canvas>

### Default - Icon Buttons

Icons can be included in buttons - generally `w-4` is a good size for small buttons, while `w-5` is good for default buttons.

<Canvas>
  <button
    type="button"
    class="
          flex
          items-center
          font-semibold
          text-gray-600
          h-btnsm
          px-sm
          mr-sm
          bg-gray-50
          bg-gradient-to-t
          from-transparent
          to-white
          border
          border-gray-300
          rounded
          shadow-sm
          hover:border-gray-400
          focus:outline-none
          focus:bg-gradient-to-t
          focus:from-bg-gray-50
          focus:to-bg-gray-50
          focus:ring-2
          focus:ring-offset-2
          focus:ring-yellow-400
        "
  >
    <svg
      class="w-4 h-4 mr-xs fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
    </svg>
    Default Button
  </button>
  <button
    type="button"
    class="
          flex
          items-center
          font-semibold
          text-gray-600
          h-btn
          px-sm
          mr-sm
          bg-gray-50
          bg-gradient-to-t
          from-transparent
          to-white
          border
          border-gray-300
          rounded
          shadow-sm
          hover:border-gray-400
          focus:outline-none
          focus:bg-gradient-to-t
          focus:from-bg-gray-50
          focus:to-bg-gray-50
          focus:ring-2
          focus:ring-offset-2
          focus:ring-yellow-400
        "
  >
    <svg
      class="w-5 h-5 mr-xs fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
    </svg>
    Default Button
  </button>
</Canvas>

## Primary Button

### Primary

The primary button style should only be used once per page for create / persistent actions, we also shouldn't have any other sizes for the primary button.

(The only exception to the one-per-page rule would be use in inline forms - such as forms in-page in card controls).

<Canvas>
  <button
    type="button"
    class="
        inline-flex
        items-center
        font-semibold
        text-gray-600
        h-btn
        px-sm
        mr-sm
        bg-primary
        bg-gradient-to-t
        from-primary
        to-primary-light
        border
        border-primary-dark
        rounded
        shadow-sm
        hover:border-primary-darker
        focus:outline-none
        focus:bg-gradient-to-t
        focus:from-primary
        focus:to-primary
        focus:ring-2
        focus:ring-offset-2
        focus:ring-yellow-400
      "
  >
    Default Button
  </button>
</Canvas>

## Dropdown Buttons

Dropdowns should be used sparingly for nested auxiliary controls.

<Canvas>
  <div class="flex-col">
    <button
      type="button"
      class="
          inline-flex
          items-center
          font-semibold
          text-gray-600
          h-btn
          px-sm
          mr-sm
          bg-gray-50
          bg-gradient-to-t
          from-transparent
          to-white
          border
          border-gray-300
          rounded
          shadow-sm
          hover:border-gray-400
          focus:outline-none
          focus:bg-gradient-to-t
          focus:from-bg-gray-50
          focus:to-bg-gray-50
          focus:ring-2
          focus:ring-offset-2
          focus:ring-yellow-400
        "
    >
      Dropdown
    </button>
    <div>
      <div
        class="w-max mt-xs max-w-xs rounded shadow-md bg-white ring-1 ring-gray-300 divide-y divide-gray-50 focus:outline-none"
        tabindex="-1"
      >
        <div class="py-1" role="none">
          <a
            href="#!"
            class="block mx-xs px-sm py-xs rounded hover:bg-gray-50"
            role="menuitem"
            tabindex="-1"
            id="menu-item-0"
          >
            Edit
          </a>
          <a
            href="#!"
            class="block mx-xs px-sm py-xs rounded hover:bg-gray-50"
            tabindex="-1"
            id="menu-item-1"
          >
            Duplicate
          </a>
        </div>
        <div class="py-1" role="none">
          <a
            href="#!"
            class="block mx-xs px-sm py-xs rounded hover:bg-gray-50"
            role="menuitem"
            tabindex="-1"
            id="menu-item-2"
          >
            Archive
          </a>
          <a
            href="#!"
            class="block mx-xs px-sm py-xs rounded hover:bg-gray-50"
            role="menuitem"
            tabindex="-1"
            id="menu-item-3"
          >
            Move
          </a>
        </div>
        <div class="py-1" role="none">
          <a
            href="#!"
            class="block mx-xs px-sm py-xs rounded hover:bg-gray-50"
            role="menuitem"
            tabindex="-1"
            id="menu-item-4"
          >
            Share
          </a>
          <a
            href="#!"
            class="block mx-xs px-sm py-xs rounded hover:bg-gray-50"
            role="menuitem"
            tabindex="-1"
            id="menu-item-5"
          >
            Add to Favorites
          </a>
        </div>
        <div class="py-1" role="none">
          <a
            href="#!"
            class="block mx-xs px-sm py-xs rounded hover:bg-gray-50 text-red-600"
            role="menuitem"
            tabindex="-1"
            id="menu-item-6"
          >
            Delete
          </a>
        </div>
      </div>
    </div>
  </div>
</Canvas>
